import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from "taro-ui"
import {View, Image} from '@tarojs/components'
import {http} from '../../../utils/http'
import {SiteSet} from '../../../utils/server.interface'
import {SITE_SET, RESOURCE_URL, TARO_ENV} from '../../../constants/api'
import './join-wx.scss'

export default class JoinWx extends Component<{ sid: number; phone: number }> {
  state: {
    siteInfo: SiteSet
    show: boolean
    showRwm: boolean
  } = {
    siteInfo: {
      siteLogo: '',
      guideCustomerFixedPhone: '',
      guideCustomerImg: '',
      guideCustomerTitle: '',
      guideCustomerSubhead: '',
      guideCustomerWeixin: '',
      guideCustomerTips: '',
      guideCustomerPhone: ''
    },
    show: false,
    showRwm: false,
  }

  async UNSAFE_componentWillMount() {
    const sid = this.props.sid
    const ret = await http.get<SiteSet>(SITE_SET, {sid})
    if (ret) {
      this.setState({show: true, siteInfo: ret})
    } else {
      this.setState({show: false})
    }
  }

  close() {
    this.setState({
      showRwm: false
    })
  }

  open() {
    this.setState({
      showRwm: true
    })
  }

  makePhone(phone) {
    try {
      Taro.makePhoneCall({
        phoneNumber: phone
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  copy() {
    try {
      const wxh = this.state.siteInfo.guideCustomerWeixin
      Taro.setClipboardData({
        data: wxh
      })
      if (process.env.TARO_ENV === 'h5') {
        Taro.showToast({title: '复制成功'})
      }
    } catch (e) {
      Taro.showToast({title: '复制失败'})
    }

  }

  showImg(current) {
    Taro.previewImage({
      current, // 当前显示图片的http链接
      urls: [current]// 需要预览的图片http链接列表
    })
  }

  async savePhoto() {
    Taro.showLoading({title: '保存中...'})
    await Taro.getImageInfo({
      src: RESOURCE_URL+this.state.siteInfo.guideCustomerImg
    }).then(async (res) => { // 需要同步处理，否则会因为异步导致写入资源繁忙，无法保存
      await Taro.saveImageToPhotosAlbum({
        filePath: res.path,
      }).then(() => {
        Taro.hideLoading()
        Taro.showToast({title: '已保存1张图片'})
      }).catch(err => {
        Taro.hideLoading()
        console.log(err);
      })
    }).catch(err => {
      Taro.hideLoading()
      console.log(err);
    })
  }

  render() {
    const {siteInfo, show, showRwm} = this.state
    return (
      <View className='joinRoot'>
        {show && <View className='wx-join' onClick={this.open.bind(this)}>
          <View className='join_img'><Image className='img' mode={`${TARO_ENV === 'h5' ? 'scaleToFill' : 'widthFix'}`}
            src={RESOURCE_URL + siteInfo.siteLogo + `${TARO_ENV !== 'h5' ? '?x-oss-process=image/resize,w_40' : ''}`}
          /></View>
          <View className='join_info'>
            <View>
              <View className='title'>{siteInfo.guideCustomerTitle}</View>
              <View className='desc'>{siteInfo.guideCustomerSubhead}</View>
            </View>
            <View className='join'>{process.env.P_ENV === 'kd'? '点我领取' : '点我添加'}</View>
          </View>
        </View>}
        {showRwm && show && <View className='show-rwm'>
          <View className='show-rwm-bj' onClick={this.close.bind(this)} />
          <View className='rwm-box'>
            <Image className='rwm' onClick={this.showImg.bind(this, RESOURCE_URL + siteInfo.guideCustomerImg)}
              src={RESOURCE_URL + siteInfo.guideCustomerImg}
            />
            <View className='rem-tip'>{siteInfo.guideCustomerTips}</View>
            <View>
              {siteInfo.guideCustomerWeixin && <View className='weixin-box'>
                <View className='icon-box'><AtIcon prefixClass='xxhz' value='wechat-fill' size='10'
                  color='#000000'
                /></View>
                <View className='text'>{siteInfo.guideCustomerWeixin}</View>
                <View onClick={this.copy.bind(this)} className='copy-img'><AtIcon value='icon icon-fuzhi-01' size='14' /></View>
              </View>}
              {siteInfo.guideCustomerPhone && <View className='phone-box'>
                <View className='icon-box'><AtIcon prefixClass='xxhz' value='phone' size='10' color='#000000' /></View>
                <View className='text'>{siteInfo.guideCustomerPhone}</View>
                <View className='btn' onClick={this.makePhone.bind(this, siteInfo.guideCustomerPhone)}>拨打</View>
              </View>}
              {siteInfo.guideCustomerFixedPhone && <View className='phone-box'>
                <View className='icon-box'><AtIcon prefixClass='xxhz' value='phone' size='10' color='#000000' /></View>
                <View className='text'>{siteInfo.guideCustomerFixedPhone}</View>
                <View className='btn' onClick={this.makePhone.bind(this, siteInfo.guideCustomerFixedPhone)}>拨打</View>
              </View>}
            </View>
            <View className='saveToPhoto-box' onClick={this.savePhoto.bind(this)}>
              {TARO_ENV !== 'h5' ? <View className='saveToPhoto'
                style={`color:#fff;background-color: ${process.env.mainColor}`}
              >保存二维码</View> :
                <View className='saveToPhoto'
                  style={`color:#fff;background-color: ${process.env.mainColor}`}
                >请长按保存二维码</View>}
            </View>
          </View>
        </View>}
      </View>
    )
  }
}
